<<<<<<< HEAD

=======
<<<<<<< HEAD
<template>
  <div class="feng">
    <div class="head">
      <div class="head1">
        <div class="head1_1"></div>
        <div class="head1_2">
          <span>扫一扫</span>
        </div>
      </div>
      <div class="head2">
        <div class="head2_1"></div>
        <div class="head2_2">
          <span>消息</span>
        </div>
      </div>
      <input
        placeholder="请输入药名，症状"
        v-model="input"
        style="
          width: 70%;
          height: 70%;
          border-radius: 99px;
          border: none;
          background-color: rgb(242, 242, 242);
          margin-top: 5px;
        "
        clearable
      />
    </div>
    <div class="head3"></div>
    <div class="lunbo sx">
      <el-carousel trigger="click" height="170px">
        <el-carousel-item v-for="item in 4" :key="item"> </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="content3">
        <div class="content3_1" @click="lingjuan">
          <div class="content_img3"></div>
        </div>
        <div class="content3_2">
          <span>领券中心</span>
        </div>
      </div>
      <div class="content4">
        <div class="content4_1" @click="lishi">
          <div class="content_img4"></div>
        </div>
        <div class="content4_2">
          <span>历史记录</span>
        </div>
      </div>
    </div>
    <div class="xinwen">
      <div class="xinwen1">
        <div class="xinwen1_1">
          <span>药头条 &nbsp;&nbsp;|</span>
        </div>
        <div class="xinwen1_2">
          <el-carousel
            height="35px"
            direction="vertical"
            indicator-position="none"
          >
            <el-carousel-item v-for="item in this.item2" :key="item">
              <h4 class="medium">{{ item }}</h4>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="jinrixinpin">
      <div class="jinrixinpin1">
        <span>新品上架</span>
      </div>
      <div class="jinrixinpin2">
        <span>去逛逛</span>
      </div>
      <div class="jinrixinpin3"></div>
    </div>
    <div class="shangpinzhanshi">
      <div style="margin-top: 10px; font-size: 20px">精品推荐</div>
      <div class="zhanshi">
        <div class="zhanshi1">
          <div class="zhanshi1_1" v-for="(item, index) in list" :key="index">
            <div style="height: 145px; text-align: center; padding-top: 10px">
              <el-image
                style="width: 150px; height: 130px"
                :src="url"
                :fit="fit"
              ></el-image>
            </div>
            <div style="height: 40px; line-height: 40px; margin-left: 5px">
              {{ item.name }}
            </div>
            <div style="height: 30px; color: red; line-height: 30px">
              &nbsp;&nbsp;{{ item.money }}
            </div>
          </div>
        </div>
        <div class="zhanshi2">
          <div class="zhanshi2_1" v-for="(item, index) in list1" :key="index">
            <div style="height: 175px; text-align: center; padding-top: 10px">
              <el-image
                style="width: 170px; height: 160px"
                :src="url"
                :fit="fit"
              ></el-image>
            </div>
            <div style="height: 40px; line-height: 40px">
              <span style="margin-left: 5px">{{ item.name }}</span>
            </div>
            <div style="height: 30px; color: red; line-height: 30px">
              &nbsp;&nbsp;{{ item.jiage }}
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; color: red; font-size: 18px;height:50px">
        没有更多了!
      </div>
    </div>
    <div class="yun">
      <van-tabbar v-model="active" route>
        <van-tabbar-item name="首页" icon="home-o" replace to="/zhuye"
          >首页</van-tabbar-item
        >
        <van-tabbar-item name="找药" icon="search" replace to="/zhaoyao"
          >找药</van-tabbar-item
        >

        <van-tabbar-item
          name="购物车"
          icon="shopping-cart-o"
          replace
          to="/shopping"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item name="我的" icon="user-o" replace to="/wode"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  name: "zhuye",
  data() {
    return {
      fit: "fill",
      url: require("@/assets/新品2.png"),
        // list: [
        //   {name:'速效救心丸（松柏）',jiage:'42元'},
        //    {name:'稳心颗粒（步长）',jiage:'32元'},
        //    {name:'阿司匹林片（奥吉娜）',jiage:'52元'},
        // ],
          list:'',
          
        list1: [
          {name:'速效救心丸（松柏）',jiage:'42元'},
           {name:'稳心颗粒（步长）',jiage:'32元'},
           {name:'阿司匹林片（奥吉娜）',jiage:'52元'},
        ],
      item2: [
        "北辰医院成立驻御龙湾临时医疗队",
        "癌症的终极疗法",
        "保健师的急聘",
      ],
      input: "",
      active: "首页",
    };
  },

  methods: {
     lingjuan () {
       this.$router.push("/lingjuan");
     },
     lishi () {
       this.$router.push("/lishi");
     },
  },

 mounted() { 
   console.log(11111);
 this.axios({
 method: "post",
 url: "http://localhost:3000/jingpin",
 processData: false,
 contentType: false,
 })
 .then((res) => {
 console.log( res.data.data);
 this.list = res.data.data
  console.log(this.list);
})
.catch((error) => {
 console.log(error);
});

  console.log(222);
 this.axios({
 method: "post",
 url: "http://localhost:3000/jingpin_2",
 processData: false,
 contentType: false,
 })
 .then((res) => {
 console.log( res.data.data);
 this.list = res.data.data
  console.log(this.list);
})
.catch((error) => {
 console.log(error);
});
},

  
};
</script>
<style scoped>
.feng {
  width: 100%;
  position: relative;
}
.head {
  height: 8%;
  width: 100%;
  text-align: center;
  position: fixed;
  z-index: 3;
  background-color: white;
}
.head1,
.head2 {
  position: absolute;
  width: 10%;
  height: 85%;
  top: 2px;
  display: flex;
  flex-direction: column;
}
.head1 {
  left: 8px;
}
.head2 {
  right: 8px;
}
.head1_1,
.head2_1 {
  flex: 1;
}
.head1_1 {
  background-image: url(../assets/扫一扫.png);
  background-size: 40px 40px;
  background-repeat: no-repeat;
}
.head2_1 {
  background-image: url(../assets/消息.png);
  background-size: 40px 40px;
}
.head1_2,
.head2_2 {
  height: 8px;
  font-size: 2px;
}
.head3 {
  height: 56px;
  width: 100%;
}
.kuoda {
  overflow: scroll;
}
.lunbo {
  margin-top: 5px;
  height: 175px;
}
.sx .el-carousel__item:nth-child(n) {
  background-image: url(../assets/轮播1.webp);
  background-size: cover;
}

.sx .el-carousel__item:nth-child(2n + 1) {
  background-image: url(../assets/轮播3.webp);
  background-size: cover;
}
.xinwen1_2 > .el-carousel__item:nth-child(2n) {
  background-color: white;
}

.xinwen1_2 > .el-carousel__item:nth-child(2n + 1) {
  background-color: white;
}
.content {
  margin-top: 15px;
  height: 100px;
  display: flex;
}
.content > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.content1_1,
.content2_1,
.content3_1,
.content4_1 {
  flex: 4;
  position: relative;
}
.content1_2,
.content2_2,
.content3_2,
.content4_2 {
  flex: 1.5;
  text-align: center;
}
.content_img1,
.content_img2,
.content_img3,
.content_img4 {
  width: 67%;
  height: 90%;
  background-color: darkgrey;
  border-radius: 99px;
  position: absolute;
  top: 5px;
  left: 10px;
  right: 10px;
  margin: 0 auto;
  background-size: cover;
  background-image: url(../assets/喇叭.png);
}
.xinwen {
  margin-top: 10px;
  height: 126px;
  background-color: rgb(242, 242, 242);
  position: relative;
}
.xinwen1 {
  width: 95%;
  height: 30%;
  background-color: white;
  border-radius: 20px;
  position: absolute;
  top: 10px;
  left: 2px;
  right: 2px;
  margin: 0 auto;
  display: flex;
}
.xinwen1_1 {
  flex: 1.5;
  text-align: center;
  line-height: 37px;
  color: rgb(1, 154, 254);
  font-weight: bold;
}
.xinwen1_2 {
  flex: 4;
}
.el-carousel__item h4 {
  color: red;
  opacity: 0.75;
  line-height: 35px;
  margin: 0;
}
.jinrixinpin {
  width: 95%;
  height: 91px;
  border-radius: 10px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
  background-color: rgb(1, 154, 254);
}
.jinrixinpin1 {
  position: absolute;
  top: 10%;
  left: 10%;
  color: white;
  font-size: 22px;
  font-weight: bold;
}
.jinrixinpin2 {
  position: absolute;
  top: 48%;
  left: 13%;
  color: rgb(1, 154, 254);
  font-size: 16px;
  font-weight: bold;
  background-color: white;
}
.jinrixinpin3 {
  width: 20%;
  height: 98%;
  position: absolute;
  top: 1%;
  right: 3%;
  background-image: url(../assets/新品2.png);
  background-size: cover;
  border: 1px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.shangpinzhanshi {
  margin-left: 10px;
  width: 95%;
  background-color: #f2f2f2;
}
.zhanshi {
  height: 90%;

  display: flex;
}
.zhanshi1,
.zhanshi2 {
  flex: 1px;
}
.zhanshi1_1 {
  margin-top: 10px;
  height: 230px;
  margin-right: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: white;
}
.zhanshi2_1 {
  margin-top: 10px;
  height: 260px;
  margin-left: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: white;
}
.yun {
  position: fixed;
  bottom: 0px;
}
=======
<<<<<<< HEAD
>>>>>>> 22687eb7cc741afaab2d3a86da9f140258536184
<template>
  <div class="feng">
    <div class="head">
      <div class="head1">
        <div class="head1_1"></div>
        <div class="head1_2">
          <span>扫一扫</span>
        </div>
      </div>
      <div class="head2">
        <div class="head2_1"></div>
        <div class="head2_2">
          <span>消息</span>
        </div>
      </div>
      <input
        placeholder="请输入药名，症状"
        v-model="input"
        @click="sousuotiaozhuan"
        style="
          width: 70%;
          height: 70%;
          border-radius: 99px;
          border: none;
          background-color: white;
          margin-top: 8px;
        "
        clearable
      />
    </div>
    <div class="head3"></div>
    <div class="lunbo sx">
      <el-carousel trigger="click" height="170px">
        <el-carousel-item v-for="item in 4" :key="item"> </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="content3">
        <div class="content3_1" @click="lingjuan">
          <div class="content_img3"></div>
        </div>
        <div class="content3_2">
          <span>领券中心</span>
        </div>
      </div>
      <div class="content4">
        <div class="content4_1" @click="lishi">
          <div class="content_img4"></div>
        </div>
        <div class="content4_2">
          <span>历史记录</span>
        </div>
      </div>
    </div>
    <div class="xinwen">
      <div class="xinwen1">
        <div class="xinwen1_1">
          <span>药头条 &nbsp;&nbsp;|</span>
        </div>
        <div class="xinwen1_2">
          <el-carousel
            height="35px"
            direction="vertical"
            indicator-position="none"
          >
            <el-carousel-item v-for="item in this.item2" :key="item">
              <h4 class="medium">{{ item }}</h4>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="xinwen2">特惠商品</div>
    </div>
    <div class="jinrixinpin">
      <div class="jinrixinpin1">
        <span>新品上架</span>
      </div>
      <div class="jinrixinpin2">
        <span>去逛逛</span>
      </div>
      <div class="jinrixinpin3"></div>
    </div>
    <div class="shangpinzhanshi">
      <div style="margin-top: 10px; font-size: 20px">精品推荐</div>
      <div class="zhanshi">
        <div class="zhanshi1">
          <div
            class="zhanshi1_1"
            v-for="(item, index) in list"
            :key="index"
            @click="tiaozhuan_fn(item.id)"
          >
            <div style="height: 145px; text-align: center; padding-top: 10px">
              <el-image
                style="width: 150px; height: 130px"
                :src="item.img"
                :fit="fit"
              ></el-image>
            </div>
            <div style="height: 40px; line-height: 40px; margin-left: 5px">
              {{ item.name }}
            </div>
            <div style="height: 30px; color: red; line-height: 30px">
              &nbsp;&nbsp;{{ item.money }}
            </div>
          </div>
        </div>
        <div class="zhanshi2">
          <div
            class="zhanshi2_1"
            v-for="(item, index) in list1"
            :key="index"
            @click="tiaozhuan_fn(item.id)"
          >
            <div style="height: 175px; text-align: center; padding-top: 10px">
              <el-image
                style="width: 170px; height: 160px"
                :src="item.img"
                :fit="fit"
              ></el-image>
            </div>
            <div style="height: 40px; line-height: 40px">
              <span style="margin-left: 5px">{{ item.name }}</span>
            </div>
            <div style="height: 30px; color: red; line-height: 30px">
              &nbsp;&nbsp;{{ item.money }}
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; color: red; font-size: 18px">
        没有更多了!
      </div>
    </div>
    <div style="height: 50px"></div>
    <div class="yun">
      <van-tabbar v-model="active" route>
        <van-tabbar-item name="首页" icon="home-o" replace to="/zhuye"
          >首页</van-tabbar-item
        >
        <van-tabbar-item name="找药" icon="search" replace to="/zhaoyao"
          >找药</van-tabbar-item
        >

        <van-tabbar-item
          name="购物车"
          icon="shopping-cart-o"
          replace
          to="/shopping"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item name="我的" icon="user-o" replace to="/wode"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  name: "zhuye",
  data() {
    return {
      fit: "fill",
      url: "",
      // url: require("http://localhost:3000/口罩.jpg"),
      // list: [
      //   {name:'速效救心丸（松柏）',jiage:'42元'},
      //    {name:'稳心颗粒（步长）',jiage:'32元'},
      //    {name:'阿司匹林片（奥吉娜）',jiage:'52元'},
      // ],
      list: "",
      list1: "",
      // list1: [
      //   {name:'速效救心丸（松柏）',jiage:'42元'},
      //    {name:'稳心颗粒（步长）',jiage:'32元'},
      //    {name:'阿司匹林片（奥吉娜）',jiage:'52元'},
      // ],
      item2: [
        "北辰医院成立驻御龙湾临时医疗队",
        "癌症的终极疗法",
        "保健师的急聘",
      ],
      input: "",
      active: "首页",
    };
  },

  methods: {
    lingjuan() {
      this.$router.push("/lingjuan");
    },
     sousuotiaozhuan() {
      this.$router.push("/sousuo");
    },
    lishi() {
      this.$router.push("/lishi");
    },
    tiaozhuan_fn(cc) {
      // let result = this.list.find((item) => {
      //   return item.id == cc;
      // });

      // console.log(result);
      console.log(cc);
      this.$router.push({
        name: "shangpin",
        params: {id: cc},
      });
    },

    
  },

  mounted() {
    console.log(11111);
    this.axios({
      method: "post",
      url: "http://localhost:3000/jingpin",
      processData: false,
      contentType: false,
    })
      .then((res) => {
        console.log(res.data.data);
        this.list = res.data.data;
        console.log(this.list[0].img);
      })
      .catch((error) => {
        console.log(error);
      });
    console.log(222);
    this.axios({
      method: "post",
      url: "http://localhost:3000/jingpin_2",
      processData: false,
      contentType: false,
    })
      .then((res) => {
        console.log(res.data.data);
        this.list1 = res.data.data;
        console.log(this.list[0].img);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
<style scoped>
.feng {
  width: 100%;
  position: relative;
}
.head {
  height: 8%;
  width: 100%;
  text-align: center;
  position: fixed;
  z-index: 3;
  background-color: rgb(1, 154, 254);
}
.head1,
.head2 {
  position: absolute;
  width: 10%;
  height: 85%;
  top: 2px;
  display: flex;
  flex-direction: column;
}
.head1 {
  left: 8px;
}
.head2 {
  right: 8px;
}
.head1_1,
.head2_1 {
  flex: 1;
}
.head1_1 {
  background-image: url(../assets/扫一扫.png);
  background-size: 40px 40px;
  background-repeat: no-repeat;
}
.head2_1 {
  background-image: url(../assets/消息.png);
  background-size: 40px 40px;
}
.head1_2,
.head2_2 {
  height: 8px;
  font-size: 2px;
}
.head3 {
  height: 56px;
  width: 100%;
}
.kuoda {
  overflow: scroll;
}
.lunbo {
  margin-top: 5px;
  height: 175px;
}
.sx .el-carousel__item:nth-child(n) {
  background-image: url(../assets/轮播1.webp);
  background-size: cover;
}

.sx .el-carousel__item:nth-child(2n + 1) {
  background-image: url(../assets/轮播3.webp);
  background-size: cover;
}
.xinwen1_2 > .el-carousel__item:nth-child(2n) {
  background-color: white;
}

.xinwen1_2 > .el-carousel__item:nth-child(2n + 1) {
  background-color: white;
}
.xinwen{
  position: relative;
}
.xinwen2{
  height: 60px;
  width: 94%;
  left: 10px;
  background-color: rgb(1, 154, 254);
  position: absolute;
  border-radius: 99px;
  bottom: 10px;
  line-height: 60px;
  text-align: center;
  font-size: 25px;
  color:white;
font-weight: bold;
}
.content {
  margin-top: 15px;
  height: 100px;
  display: flex;
}
.content > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.content1_1,
.content2_1,
.content3_1,
.content4_1 {
  flex: 4;
  position: relative;
}
.content1_2,
.content2_2,
.content3_2,
.content4_2 {
  flex: 1.5;
  text-align: center;
}
.content_img1,
.content_img2,
.content_img3,
.content_img4 {
  width: 67%;
  height: 90%;
  background-color: darkgrey;
  border-radius: 99px;
  position: absolute;
  top: 5px;
  left: 10px;
  right: 10px;
  margin: 0 auto;
  background-size: cover;
  background-image: url(../assets/喇叭.png);
}
.xinwen {
  margin-top: 10px;
  height: 126px;
  background-color: rgb(242, 242, 242);
  position: relative;
}
.xinwen1 {
  width: 95%;
  height: 30%;
  background-color: white;
  border-radius: 20px;
  position: absolute;
  top: 10px;
  left: 2px;
  right: 2px;
  margin: 0 auto;
  display: flex;
}
.xinwen1_1 {
  flex: 1.5;
  text-align: center;
  line-height: 37px;
  color: rgb(1, 154, 254);
  font-weight: bold;
}
.xinwen1_2 {
  flex: 4;
}
.el-carousel__item h4 {
  color: red;
  opacity: 0.75;
  line-height: 35px;
  margin: 0;
}
.jinrixinpin {
  width: 95%;
  height: 91px;
  border-radius: 10px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
  background-color: rgb(1, 154, 254);
}
.jinrixinpin1 {
  position: absolute;
  top: 10%;
  left: 10%;
  color: white;
  font-size: 22px;
  font-weight: bold;
}
.jinrixinpin2 {
  position: absolute;
  top: 48%;
  left: 13%;
  color: rgb(1, 154, 254);
  font-size: 16px;
  font-weight: bold;
  background-color: white;
}
.jinrixinpin3 {
  width: 20%;
  height: 98%;
  position: absolute;
  top: 1%;
  right: 3%;
  background-image: url(../assets/新品2.png);
  background-size: cover;
  border: 1px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.shangpinzhanshi {
  margin-left: 10px;
  width: 95%;
  background-color: #f2f2f2;
}
.zhanshi {
  height: 90%;

  display: flex;
}
.zhanshi1,
.zhanshi2 {
  flex: 1px;
}
.zhanshi1_1 {
  margin-top: 10px;
  height: 230px;
  margin-right: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: white;
}
.zhanshi2_1 {
  margin-top: 10px;
  height: 260px;
  margin-left: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: white;
}
.yun {
  position: fixed;
  bottom: 0px;
}
<<<<<<< HEAD
</style>
=======
>>>>>>> 39612bdab60606cd69de790419fec286c47674e0
>>>>>>> 8b46cec49f0d1758391f1d5b8ace638f18865ed9
</style>
>>>>>>> 22687eb7cc741afaab2d3a86da9f140258536184
